<template>
    <div class="layout">
        <div class="layout" ref="MapView"></div>
    </div>
</template>
<script>

import simpleMap from '../../components/simpleMap';

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]

import datas from '../TestData/list';
import heatMapData from './heatMapData.js'
console.log(datas);

var _Element = null;
// 随机函数
function randomNum(min, max) {
    return parseFloat(Math.random() * (max - min + 1) + min, 10);
}
export default {
    data() {
        return {}
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        map.flytochina();

        var viewer = map.getViewer();
        var scene = viewer.scene;

        const Max = arr => Math.max.apply(null, arr);
        const Min = arr => Math.min.apply(null, arr);

        var _x = [];
        var _y = [];

        for (let i = 0; i < heatMapData.length; i++) {
            const element = heatMapData[i];
            _x.push(element.x);
            _y.push(element.y);

            var $x = element.x;
            element.x = element.y;
            element.y = $x;

            // element.value = randomNum(0, 100);
        }

        console.log(Min(_x), Max(_x));
        console.log(Min(_y), Max(_y));

        // 创建元素图形图层
        _Element = new simpleMap.ElementDataSource(map);
        // //  创建矩形元素
        // _Element.add('rectangle', {
        //     id: 'rectangle',
        //     points: [{ longitude: 118.14230000000002, latitude: 23.579654836809663 }, { longitude: 118.86126465307407, latitude: 26.925255341162096 }], // 坐标点，左上角/右下角（西北角，东南角）
        //     color: '#DD00DDCC', // 颜色
        // });


        var bounds = {
            west: 118.14230000000002, south: 23.579654836809663, east: 118.86126465307407, north: 26.925255341162096
        };

        // 初始化热力图图层
        let heatMap = CesiumHeatmap.create(
            viewer, // your cesium viewer
            bounds, //矩形面积
            {
                backgroundColor: "rgba(0,0,0,0)",
                radius: 30,
                maxOpacity: .5,
                minOpacity: 0,
                blur: .75,
                gradient: {
                    '0.9': 'red',
                    '0.8': 'orange',
                    '0.7': 'yellow',
                    '0.5': 'blue',
                    '0.0': 'green',
                },
            }
        );
        console.log(heatMapData);
        heatMap.setWGS84Data(0, 1, heatMapData);
    },
    methods: {

    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style scoped>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
}

.title {
    color: #fff;
}

.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}

.itemBox {
    margin-bottom: 5px;
}
</style>